<template>
  <view class="search top_head pr " :style="'background-color: '+bgcolor+';'" >
    <view class="search-box">
      <view class="search-box__content">
        <view class="icon-content-search">
          <qui-icon name="icon-search" size="30" color="#bbb"></qui-icon>
        </view>
        <input type="text" class="search-box__content-input" placeholder-class="input-placeholder"
          :placeholder="i18n.t('search.searchkeywords')" @input="searchInput" :value="searchValue" />
        <view @tap="clearSearch" v-if="searchValue" class="search-box__content-delete">
          <qui-icon name="icon-close1" size="32" color="#ccc"></qui-icon>
        </view>
      </view>
      <view class="search-box__cancel" v-if="searchValue" @tap="clearSearch">
        <text>{{ i18n.t('search.cancel') }}</text>
      </view>
    </view>


 </view>

</template>

<script>
  import { status } from '@/library/jsonapi-vuex/index';
  export default {
    data() {
      return {
        searchValue: '',
      }
    },
    props: {
      bgcolor: {
        type: String,
        default: ''
      },

      toplogo: {
        type: String,
        default: ''
      },
      search:{
        type:Object,
         default: () => {},
      }
    },
    methods: {
      clearSearch() {
        this.searchValue = '';
        this.userList = [];
        this.themeList = [];
         this.$emit('search','');
      },
      searchInput(e) {

        this.searchValue = e.target.value;
        if (this.timeout) clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          // this.getUserList(e.target.value);
          // this.getThemeList(e.target.value);
          this.$emit('search',e.target.value);
        }, 250);
      },
      clearSearch() {
        this.searchValue = '';
        this.userList = [];
        this.themeList = [];
      },
      // 获取用户列表
      getUserList(key) {
        const params = {
          include: 'groups',
          sort: 'createdAt',
          'page[number]': this.pageNum,
          'page[limit]': 3,
          'filter[username]': `*${key}*`,
        };
        status
          .run(() => this.$store.dispatch('jv/get', ['users', { params }]))
          .then(res => {
            if (res._jv) {
              delete res._jv;
            }
            this.userTotal = res.length;
            this.userList = res;
          });
      },
      // 获取主题列表
      getThemeList(key) {
        const params = {
          include: [
            'user',
            'user.groups',
            'firstPost',
            'firstPost.images',
            'firstPost.postGoods',
            'category',
            'threadVideo',
            'threadAudio',
            'question',
            'question.beUser',
            'question.beUser.groups',
          ],
          'filter[isDeleted]': 'no',
          'filter[isApproved]': 1,
          'page[number]': this.pageNum,
          'page[limit]': 2,
          'filter[q]': key,
        };
        status
          .run(() => this.$store.dispatch('jv/get', ['threads.v2', { params }]))
          .then(res => {
            if (res._jv) {
              delete res._jv;
            }
            this.themeTotal = res.length;
            this.themeList = res;
          });
      },
    },
  }
</script>

<style>
.top_head{

  /* #ifdef APP-PLUS  */
  padding-top: 40rpx;
  /* #endif */
  /* #ifdef MP-WEIXIN */
   padding-top: 40rpx;
  /* #endif */
}
 /*  #ifdef H5|| MP-WEIXIN  */
 .search-box__content-input {
   border-radius: 78rpx;
 }
 /* #endif */
</style>
